<template>
	<view>
		
		<view class="notice" v-if="availableCoupons.length == 0">
			您没有待领取的优惠券
		</view>
		
		<view v-else>
			<view class="notice" >待领取的优惠券</view>
			<view class="quan" v-for="(coupon, index) in availableCoupons" >
				<view class="quanInfo">
					<text class="couponMpoey">
						￥{{coupon.mjqfd}}
						<text class="couponMpoeyInfo">满{{coupon.mjqqsje}}减{{coupon.mjqfd}}</text>
					</text>
					<text class="couponName">店铺优惠劵</text>
					<!-- <text class="couponTime">2019.8.1 00:00-2019.8.123:59</text> -->
				</view>
				<view class="receiveBtn">
					<view class="receive" @click="receive(coupon.yhqID)">领取</view>
				</view>
			</view>
		</view>
		
		<hr/>
		<view class="notice" >已有的优惠券</view>
		<view class="quan" v-for="(coupon, index) in myCoupons" >
			<view class="quanInfo">
				<text class="couponMpoey">
					￥{{coupon.mjqfd}}
					<text class="couponMpoeyInfo">满{{coupon.mjqqsje}}减{{coupon.mjqfd}}</text>
				</text>
				<text class="couponName">店铺优惠劵</text>
				<!-- <text class="couponTime">2019.8.1 00:00-2019.8.123:59</text> -->
			</view>
			<view class="receiveBtn">
				<view class="receive" >待使用</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {myRequest} from '@/api/ajax.js'
	import { createNamespacedHelpers } from 'vuex'
	const { mapState, mapActions } = createNamespacedHelpers('coupon')
	
	export default {
		data() {
			return {
				myCoupons: []
			}
		},
		
		computed:{
			...mapState({
				availableCoupons: state => state.availableCoupons,
			})
		},
		
		mounted() {
			this.getCoupons();
		},
		
		methods: {
			// 获取已拥有的优惠券
			async getCoupons() {
				let result = await myRequest({
					url: '/newtest/shop-mjq/getyhqbyuserID/' + this.$store.state.userInformation.userID
				})
				
				this.myCoupons = result.data.res
				console.log('已有优惠券result = ', this.myCoupons)
					
			},
			// 确认领取优惠券
			async receive(coupon_id) {
				let result = await myRequest({
					url: '/newtest/shop-mjq/buyyhq/' + this.$store.state.userInformation.userID + '/' + coupon_id
				})
				
				// console.log('确认领取优惠券result = ', result)
				uni.showToast({
					title: '领取成功',
					duration: 1500
				});
				
				// 领完后删除待领取列表中对应的
				this.$store.commit('coupon/deleteById', coupon_id)
				this.getCoupons()
			}
		}
	}
</script>

<style lang="scss">
	.notice{
		text-align: center;
		margin-top: 20upx;
	}
	
	.quan{
		margin: 22rpx 37rpx;
		background-color: #FFF5F6;
		border-radius: 10rpx;
		display: flex;
		font-family: PingFang SC;
	}
	.quanInfo{
		/* 两个窟窿是这块做出来的 */
		background-image: radial-gradient(circle at right top, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx), radial-gradient(circle at right bottom, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx);
		border-right: 1px dashed #F64F51;
		padding: 30rpx 50rpx;
		width: 75%;
	}
	.couponMpoey{
		font-size: 30rpx;
		font-weight: 700;
		color: #ff3600;
		display: block;
	}
	.couponMpoeyInfo{
		font-size: 26rpx;
		padding-left: 10rpx;
	}
	.couponName{
		font-size: 24rpx;
		font-weight: 500;
		color: #797979;
		display: block;
	}
	.couponTime{
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #797979;
	}
	.receiveBtn{
		background-image: radial-gradient(circle at left top, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx), radial-gradient(circle at left bottom, #FFFFFF, #FFFFFF 15rpx, transparent 16rpx);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: -2rpx;
	}
	.receive{
		border-radius: 23rpx;
		background-color: #5FC484;
		padding: 7rpx 31rpx;
		text-align: center;
		margin-left: 36rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ffffff;
	}
	
</style>
